<template>
  <div style="height: 100%">
    <div class="waterdom borderRidus boxShadow first_width">
      <modelTitle :title="'机械科指标'" />
      <div class="model_chart">
        <px-row :gutter="16" style="margin-top: 16px">
          <px-col :span="4">
            <div class="otherdiv" @click="showSpc('热水温度')">
              <p class="otherdiv-title">热水温度</p>
              <img class="otherdiv-icon" src="@/assets/images/water/icon11.png" />
              <p class="otherdiv-num">
                {{ machinedatafiltervalue("热水温度") }}<span>{{ machinedatafilterunit("热水温度") }}</span>
              </p>
            </div>
          </px-col>
          <px-col :span="4">
            <div class="otherdiv" @click="showSpc('中温水温度')">
              <p class="otherdiv-title">中温水温度</p>
              <img class="otherdiv-icon" src="@/assets/images/water/icon11.png" />
              <p class="otherdiv-num">
                {{ machinedatafiltervalue("中温水温度") }}<span>{{ machinedatafilterunit("中温水温度") }}</span>
              </p>
            </div>
          </px-col>
          <px-col :span="4">
            <div class="otherdiv" @click="showSpc('冰水温度')">
              <p class="otherdiv-title">冰水温度</p>
              <img class="otherdiv-icon" src="@/assets/images/water/icon11.png" />
              <p class="otherdiv-num">
                {{ machinedatafiltervalue("冰水温度") }}<span>{{ machinedatafilterunit("冰水温度") }}</span>
              </p>
            </div>
          </px-col>
          <px-col :span="4">
            <div class="otherdiv othercolor2" @click="showSpc('酸性废气处理系统总压力')">
              <p class="otherdiv-title">酸性废气处理系统总压力</p>
              <img class="otherdiv-icon iconwidth" src="@/assets/images/water/icon12.png" />
              <p class="otherdiv-num othernumcolor2">
                {{ machinedatafiltervalue("酸性废气处理系统总压力") }}<span>{{ machinedatafilterunit("酸性废气处理系统总压力") }}</span>
              </p>
            </div>
          </px-col>
          <px-col :span="4">
            <div class="otherdiv othercolor2" @click="showSpc('碱性废气处理系统总压力')">
              <p class="otherdiv-title">碱性废气处理系统总压力</p>
              <img class="otherdiv-icon iconwidth" src="@/assets/images/water/icon12.png" />
              <p class="otherdiv-num othernumcolor2">
                {{ machinedatafiltervalue("碱性废气处理系统总压力") }}<span>{{ machinedatafilterunit("碱性废气处理系统总压力") }}</span>
              </p>
            </div>
          </px-col>
          <px-col :span="4">
            <div class="otherdiv othercolor2" @click="showSpc('一般排气处理系统总压力')">
              <p class="otherdiv-title">一般排气处理系统总压力</p>
              <img class="otherdiv-icon iconwidth" src="@/assets/images/water/icon12.png" />
              <p class="otherdiv-num othernumcolor2">
                {{ machinedatafiltervalue("一般排气处理系统总压力") }}<span>{{ machinedatafilterunit("一般排气处理系统总压力") }}</span>
              </p>
            </div>
          </px-col>
        </px-row>
      </div>
    </div>
    <px-dialog v-model="analyzevisual" draggable clickHideContent title="SPC指标" width="1431" style="height: 95%" align-center>
      <spcAnalyzePosition :spcUnit="spcUnit" :spcJob="spcJob" style="height: 100%" />
    </px-dialog>
  </div>
</template>

<script setup>
import modelTitle from "@/views/common/components/modelTitle/index.vue";
import spcAnalyzePosition from "@/views/water/spc/spcsearch/spcAnalyzePosition.vue";
import { dashboardqueryOtherDeptIndicator } from "@/api/waterKanban";
import { useRouter } from "vue-router";
import { ref, reactive, toRefs, onMounted } from "vue";
const state = reactive({
  totalDay: {
    alarmStat: { total: 0, done: 0, undone: 0 },
    callInWorkOrder: { total: 0, done: 0, undone: 0 },
    deviceStatusStat: { normal: 0, warn: 0, standby: 0, fault: 0 },
    inspectionTasks: { total: 0, done: 0, undone: 0 },
    maintenanceTasks: { total: 0, done: 0, undone: 0 },
    pmTasks: { total: 0, done: 0, undone: 0 },
    safetyHazardTasks: { total: 0, done: 0, undone: 0 },
    totalStat: { total: 0, done: 0 }
  },
  tableData: [],
  autoplay: false,
  eledata: [],
  gasdata: [],
  machinedata: [],
  spcJob: [
    {
      jobId: "",
      indicatorName: ""
    }
  ]
});
const { eledata, gasdata, machinedata, spcJob } = toRefs(state);
onMounted(() => {
  dashboardqueryOtherDeptIndicator({}).then(res => {
    console.log(res);
    eledata.value = res.ele;
    gasdata.value = res.gas;
    machinedata.value = res.machine;
  });
});
const analyzevisual = ref(false);
const spcUnit = ref("");
const showSpc = type => {
  analyzevisual.value = true;
  const typevalue = machinedata.value.filter(item => item.name == type)[0];
  spcUnit.value = typevalue.unit;
  spcJob.value = [
    {
      jobId: typevalue.pointPosition,
      indicatorName: typevalue.name
    }
  ];
};
const machinedatafiltervalue = type => {
  if (machinedata.value.length > 0) {
    const typevalue = machinedata.value.filter(item => item.name == type);
    return typevalue[0].value != null ? typevalue[0].value : "-";
  }
};
const machinedatafilterunit = type => {
  if (machinedata.value.length > 0) {
    const typevalue = machinedata.value.filter(item => item.name == type);
    return typevalue[0].unit != null ? typevalue[0].unit : "-";
  }
};
const gasdatafiltervalue = type => {
  if (gasdata.value.length > 0) {
    const typevalue = gasdata.value.filter(item => item.name == type);
    return typevalue[0].value != null ? typevalue[0].value : "-";
  }
};
const gasdatafilterunit = type => {
  if (gasdata.value.length > 0) {
    const typevalue = gasdata.value.filter(item => item.name == type);
    return typevalue[0].unit != null ? typevalue[0].unit : "-";
  }
};
const eledatafiltervalue = type => {
  if (eledata.value.length > 0) {
    const typevalue = eledata.value.filter(item => item.name == type);
    return typevalue[0].value != null ? typevalue[0].value : "-";
  }
};
</script>
<style scoped lang="scss">
.waterdom {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: center;
  width: 100%;
  height: 100%;
  padding: 16px;
  background-color: #fff;
}

.first_width {
  width: calc(100% - 16px);
}

.main_chart_dom {
  height: 286px;
  margin-top: 16px;
}

.model_chart {
  width: 100%;
  height: calc(100% - 40px);
}

.torouter {
  position: absolute;
  top: 24px;
  right: 20px;
  cursor: pointer;
}

.otherdiv {
  position: relative;
  width: 100%;
  height: 117px;
  cursor: pointer;
  background: #eff6ff;
  border-radius: 4px;
}

.othercolor2 {
  background: #fff5e5;
}

.othercolor3 {
  background: #e6fbf8;
}

.otherdiv-title {
  position: absolute;
  top: 16px;
  left: 16px;
  width: 128px;
  font-size: 16px;
  font-weight: 600;
  line-height: 22px;
  color: #000;
}

.otherdiv-icon {
  position: absolute;
  right: 16px;
  bottom: 16px;
  width: 47px;
  height: 53px;
}

.iconwidth {
  width: 48px;
  height: 43px;
}

.otherdiv-num {
  position: absolute;
  bottom: 16px;
  left: 16px;
  font-size: 24px;
  font-weight: 600;
  line-height: 33px;
  color: #3b82f6;

  span {
    font-size: 16px;
  }
}

.othernumcolor2 {
  color: #f59e0b;
}

.othernumcolor3 {
  color: #12b981;
}

:deep(.px-col-9) {
  flex: 0 0 11.1111%;
  max-width: 11.1111%;
}
</style>
